@import "tailwindcss";
@import "./themes/default.css";
@plugin "./../plugin.js";
@plugin "flowbite-typography";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
    --spacing-8xl: 90rem; 
    --text-2xs: 0.625rem;
}

/*
“Have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.”
― Steve Jobs
*/

.yt-video {
    height: 250px;
}

@media only screen and (min-width: 768px) {
	.yt-video {
		height: 350px;
	}
}

@media only screen and (min-width: 1024px) {
	.yt-video {
		height: 450px;
	}
}

@media only screen and (max-width: 1024px) {
	.collapse.collapsed {
		display: none;
	}
}

#TableOfContents > ul {
	@apply overflow-x-hidden font-medium text-gray-500 dark:text-gray-400;
}

#TableOfContents > ul > li {
	@apply py-2;
}

#TableOfContents > ul > li > a {
	@apply block pl-2.5 font-medium border-l border-white duration-200 hover:text-gray-900 transition-none dark:hover:text-white hover:border-gray-300 after:content-['#'] after:text-blue-700 dark:after:text-blue-500 dark:border-gray-900 dark:hover:border-gray-700 after:ml-2 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-100;
}

#TableOfContents > ul > li > ul > li > a {
	@apply pl-6 border-l border-white duration-200 hover:text-gray-900 transition-none dark:hover:text-white hover:border-gray-300 after:content-['#'] after:text-blue-700 dark:after:text-blue-500 dark:border-gray-900 dark:hover:border-gray-700 after:ml-2 after:opacity-0 hover:after:opacity-100 after:transition-opacity after:duration-100;
}

#TableOfContents > ul > li > ul {
	@apply pt-2;
}

#TableOfContents > ul > li > ul > li {
	@apply py-2;
}

#TableOfContents > ul > li > ul > li:last-of-type {
	@apply pb-0;
}

.highlight {
	@apply overflow-hidden;
}

#mainContent > h2 {
	@apply mt-8 mb-4 text-2xl font-semibold dark:text-white;
}

#mainContent > h3,
#mainContent > h4 {
	@apply mt-8 mb-4 text-xl font-semibold dark:text-white;
}

#mainContent > p {
	@apply mb-4 text-base font-normal text-gray-600 dark:text-gray-400;
}

#mainContent > p > a,
#mainContent > ul > li > a,
#mainContent > ol > li > a,
#mainContent > ul > li > p > a,
#mainContent > ol > li > p > a {
	@apply font-medium text-gray-700 underline dark:text-gray-300 decoration-1 underline-offset-2 decoration-blue-600 dark:decoration-blue-500;
}

#mainContent > p > a:hover,
#mainContent > ul > li > a:hover,
#mainContent > ol > li > a:hover,
#mainContent > ul > li > p > a:hover,
#mainContent > ol > li > p > a:hover {
	@apply text-gray-900 decoration-2 dark:text-white;
}

#mainContent > p > code,
#mainContent > ul > li > code,
#mainContent > ol > li > code {
	@apply px-1 font-mono text-sm text-blue-600 break-all dark:text-blue-400;
}

#mainContent > ul {
	list-style: disc;
}

#mainContent > ol {
	list-style: decimal;
}

#mainContent p > strong {
	@apply text-gray-900 dark:text-white;
}

#mainContent > ul,
#mainContent > ol {
	padding-left: 1rem;
}

#mainContent > ul > li,
#mainContent > ol > li {
	@apply mb-4 text-base font-normal text-gray-600 dark:text-gray-400;
}

/* prism styles */

code[class*="language-"],
pre[class*="language-"] {
	font-family: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;
	text-shadow: none;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

	@apply text-gray-500 dark:text-gray-400 font-normal;
}

/* without preview */
.highlight pre[class*="language-"] {
	overflow: auto;
	@apply p-6 pt-6 m-0 mt-4 mb-8 text-sm bg-gray-50 rounded-xl dark:bg-gray-800;
}

[data-code-wrapper] .highlight pre[class*="language-"] {
	@apply my-0;
}

/* when after preview */
.code-preview-wrapper + .code-syntax-wrapper > .code-syntax > .relative > [data-code-wrapper] .highlight pre[class*="language-"],
.code-preview-wrapper + .code-syntax-wrapper > .code-syntax {
	overflow-y: hidden;
	overflow-x: scroll;
	@apply mt-0 rounded-none;
}

.code-preview-wrapper + .code-syntax-wrapper {
	@apply mb-4;
}

.code-preview-wrapper + .code-syntax-wrapper > .code-syntax > .relative > [data-code-wrapper] > .highlight > pre[class*="language-"] {
	@apply p-4 m-0 bg-gray-50 dark:bg-gray-800;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	@apply bg-gray-50 dark:bg-gray-800;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: 0.1em;
	border-radius: 0.3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	@apply text-gray-800 dark:text-gray-400;
}

.token.punctuation {
	@apply text-gray-800 dark:text-gray-400;
}

.namespace {
	opacity: 0.7;
}

.token.property,
.token.keyword,
.token.tag {
	@apply text-pink-700 dark:text-pink-400;
}

.token.class-name {
	@apply text-violet-700 dark:text-violet-400;
	text-decoration: underline;
}

.token.boolean,
.token.constant {
	@apply text-green-600 dark:text-green-400;
}

.token.symbol,
.token.deleted {
	@apply text-red-500 dark:text-red-400;
}

.token.number {
	@apply text-violet-700 dark:text-violet-400;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	@apply text-sky-600 dark:text-sky-500;
}

.token.variable {
	@apply text-purple-500 dark:text-purple-400;
}

.token.operator {
	@apply text-gray-500 dark:text-gray-400 dark:bg-gray-800;
}

.token.entity {
	@apply text-yellow-400 dark:text-yellow-300;
	cursor: help;
}

.token.url {
	@apply text-blue-600 dark:text-blue-500;
}

.language-css .token.string,
.style .token.string {
	@apply text-red-500 dark:text-red-400;
}

.token.atrule,
.token.attr-value {
	@apply text-blue-600 dark:text-blue-500;
}

.token.function {
	@apply text-cyan-700 dark:text-cyan-500;
}

.token.regex {
	color: #e9c062;
}

.token.important {
	color: #fd971f;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

code.language-bash,
pre.language-bash {
	@apply text-blue-600 dark:text-blue-400;
}

code.language-javascript {
	@apply text-blue-600 dark:text-blue-400;
}

code.language-javascript .token.function{
	@apply text-green-500 dark:text-green-300;
}

code.language-javascript .token.punctuation{
	@apply text-gray-500 dark:text-gray-400;
}

code.language-javascript .token.keyword{
	@apply text-pink-500 dark:text-pink-400;
}

code.language-javascript .token.comment{
	@apply text-gray-500 dark:text-gray-500;
}

code.language-javascript .token.string{
	@apply text-purple-600 dark:text-purple-400;
}

code.language-javascript .token.class-name{
	@apply text-orange-400 dark:text-orange-300;
}

code.language-javascript .token {
	/* @apply text-blue-900 dark:text-blue-500; */
	background: transparent;
}

/* language html */
code.language-html .token.tag{
	@apply text-fuchsia-700 dark:text-fuchsia-400;
}
code.language-html .token.attr-value{
	@apply text-blue-600 dark:text-blue-400;
}
code.language-html .token.punctuation{
	@apply text-gray-400 dark:text-gray-500;
}
code.language-html .token.attr-name{
	@apply text-green-600 dark:text-green-400;
}
code.language-html .token.comment{
	@apply text-gray-400 dark:text-gray-500;
}


.code-responsive-wrapper {
	background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d1d5db' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.dark .code-responsive-wrapper {
	background-color: #111827;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%236b7280' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#carbonads * {
	margin: initial;
	padding: initial;
}
#carbonads {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
		Helvetica, Arial, sans-serif;
	@apply m-0;
}
#carbonads {
	display: flex;
	max-width: 330px;
	box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
	z-index: 100;
	@apply bg-white dark:bg-gray-800 dark:text-white;
}
#carbonads a {
	color: inherit;
	text-decoration: none;
}
#carbonads a:hover {
	color: inherit;
}
#carbonads span {
	position: relative;
	display: block;
	overflow: hidden;
}
#carbonads .carbon-wrap {
	display: flex;
}
#carbonads .carbon-img {
	display: block;
	margin: 0;
	line-height: 1;
}
#carbonads .carbon-img img {
	display: block;
}
#carbonads .carbon-text {
	font-size: 13px;
	padding: 10px;
	margin-bottom: 16px;
	line-height: 1.5;
	text-align: left;
}
#carbonads .carbon-poweredby {
	@apply bg-gray-100 dark:bg-gray-800;
	display: block;
	padding: 6px 8px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	font-size: 8px;
	line-height: 1;
	/* border-left-radius: 3px; */
	position: absolute;
	bottom: 0;
	right: 0;
}

/* Search */

.DocSearch.DocSearch-Button {
	@apply p-2 m-0 md:w-52 dark:bg-gray-800 bg-white border-white items-center dark:border-gray-800 justify-center focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 md:justify-between h-[40px] w-[40px] md:bg-gray-50 rounded-lg border md:border-gray-300 md:border-solid shadow-none xl:pl-4 flex hover:bg-gray-100 dark:focus:bg-gray-600 xl:w-64 hover:shadow-none focus:shadow-none dark:md:bg-gray-700 dark:hover:bg-gray-600 dark:md:border-gray-600;
}

.DocSearch-Button-Placeholder {
	@apply text-sm font-normal text-gray-500 dark:text-gray-400;
}

.DocSearch-Search-Icon {
	@apply !w-4 !h-4 md:!w-3 md:!h-3 md:!mr-1 !text-transparent;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236A7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
}

.dark .DocSearch-Search-Icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%239BA3AF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/></svg>');
}

.DocSearch-Button-Keys {
	@apply items-center min-w-0;
}

.DocSearch-Button-Key:first-child {
  @apply mr-px text-base;
}

.DocSearch-Button-Key {
	@apply w-auto pt-1 pb-0 m-0 text-xs font-normal text-gray-500 shadow-none bg-none dark:text-gray-400;
}

.DocSearch-Button .DocSearch-Search-Icon {
	@apply text-gray-500;
}

.DocSearch-Hit-icon {
	@apply hidden;
}

.DocSearch-Hits mark {
	@apply text-blue-600 dark:text-white decoration-2 underline-offset-2 decoration-blue-600 dark:decoration-white;
}

.DocSearch-Hit[aria-selected=true] a {
	@apply bg-blue-700 dark:bg-blue-600;
}

.DocSearch-Hit-source {
	@apply pb-1 text-gray-700 bg-white dark:bg-gray-700 dark:text-gray-400;
}

.DocSearch-Container {
	@apply bg-gray-900/50 dark:bg-gray-900/80;
}

.DocSearch-Modal {
	@apply mx-auto mt-[1rem] max-h-[calc(100vh-2rem)] w-full max-w-[calc(100vw-2rem)] overflow-hidden shadow-none rounded-lg lg:mt-[4rem] lg:max-h-none lg:max-w-xl;
}

.DocSearch-SearchBar {
	@apply p-0 border-b border-gray-100 dark:border-gray-600 dark:bg-gray-700;
}

.DocSearch-Form {
	@apply shadow-none dark:bg-gray-700;
}

.DocSearch-Input {
	@apply text-sm text-gray-500 shadow-none dark:text-white focus:shadow-none focus:ring-0 dark:bg-gray-700;
}

.DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg {
	@apply w-4 h-4;
}

.DocSearch-Commands {
	@apply hidden;
}

.DocSearch-Footer {
	@apply h-12 border-t border-gray-100 shadow-none dark:bg-gray-700 dark:border-gray-600;
}

.DocSearch-Dropdown {
	@apply bg-white dark:bg-gray-700;
}

.DocSearch-Hit {
	@apply pb-2 shadow-none;
}

.DocSearch-Hit a {
	@apply rounded-lg shadow-none bg-gray-50 dark:bg-gray-600 dark:hover:bg-blue-600;
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon,
.DocSearch-Hit-action-button {
	@apply hidden;
}

.DocSearch-Hit .DocSearch-Hit-action:last-child {
	@apply w-5 h-5;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action:last-child {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11 9 3 3-3 3' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.DocSearch-Screen-Icon,
.DocSearch-NoResults-Prefill-List,
.DocSearch-Cancel {
	@apply hidden;
}

.DocSearch-Title {
	@apply mb-1 text-lg font-normal text-gray-700 dark:text-gray-200;
}

.DocSearch-Hit-Container {
	@apply dark:text-gray-300;
}

.DocSearch-Logo svg {
	@apply dark:text-gray-400;
}

.DocSearch-Reset {
	@apply dark:text-gray-300 dark:hover:text-white hover:text-black;
}

.formkit-alert.formkit-alert-success {
	@apply p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-gray-800 dark:text-green-400 font-medium;
}

.formkit-alert.formkit-alert-error:not(:empty) {
	@apply p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-gray-800 dark:text-red-400;
}
